<template>
  <div>
    <div class="workbench">
      <div :style="{ paddingBottom: '16px' }">
        <a-row :gutter="[10, 10]" :wrap="true">
          <a-col :span="24">
            <a-row :gutter="10" :wrap="true">
              <a-col :span="3" class="col-three-height">
                <TotalThreeSpan title="房间总数" />
              </a-col>
              <a-col :span="3" class="col-three-height">
                <TotalThreeSpan title="住户总数" />
              </a-col>
              <a-col :span="3" class="col-three-height">
                <TotalThreeSpan title="车辆总数" />
              </a-col>
              <a-col :span="3" class="col-three-height">
                <TotalThreeSpan title="车位总数" />
              </a-col>
              <a-col :span="3" class="col-three-height">
                <TotalThreeSpan title="今日已处理工单数" />
              </a-col>
              <a-col :span="3" class="col-three-height">
                <TotalThreeSpan title="今日访客数" />
              </a-col>
              <a-col :span="3" class="col-three-height">
                <TotalThreeSpan title="未来7天应收（元）" />
              </a-col>
              <a-col :span="3" class="col-three-height">
                <TotalThreeSpan title="目前已到期应收（元）" />
              </a-col>
            </a-row>
          </a-col>

          <a-col :span="6" class="col-default-height">
            <!--   近7天物业费趋势    -->
            <PropertyFeeTrend />
          </a-col>
          <a-col :span="6" class="col-default-height">
            <!--   房源概况    -->
            <HouseOverview />
          </a-col>
          <a-col :span="6" class="col-default-height">
            <!--   近7天停车收费趋势    -->
            <ParkingTrend />
          </a-col>
          <a-col :span="6" class="col-default-height">
            <!--   充电桩收费    -->
            <ChargPileTrend />
          </a-col>
          <a-col :span="6" class="col-default-height">
            <!--   待处理报修工单    -->
            <WorkOrderTrend />
          </a-col>
          <a-col :span="6" class="col-default-height">
            <!--   进行中的审批    -->
            <ApproveList />
          </a-col>
          <a-col :span="6" class="col-default-height">
            <!--   待发通知单   -->
            <InformList />
          </a-col>
          <a-col :span="6" class="col-default-height">
            <!--   智能设备/设备巡检    -->
            <div class="col-box">
              <!--   智能设备   -->
              <div class="equipment-box">
                <SmartDevice />
              </div>
              <!--   设备巡检   -->
              <div class="contract-box">
                <FacilityInspection />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script>
import {
  computed,
  createVNode,
  defineAsyncComponent,
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import { FireFilled } from "@ant-design/icons-vue";
import ViewMobile from "@/views/home/modules/ViewMobile.vue";
import VacancyWarn from "@/views/home/modules/vacancyWarn.vue";
const TotalThreeSpan = defineAsyncComponent(() =>
  import("@/views/home/modules/TotalThreeSpan.vue")
);
import PropertyFeeTrend from "@/views/home/modules/PropertyFeeTrend.vue";
import HouseOverview from "@/views/home/modules/houseOverview.vue";
import ParkingTrend from "@/views/home/modules/ParkingTrend.vue";
import ChargPileTrend from "@/views/home/modules/ChargPileTrend.vue";
import WorkOrderTrend from "@/views/home/modules/WorkOrderTrend.vue";
import ApproveList from "@/views/home/modules/approveList.vue";
import InformList from "@/views/home/modules/informList.vue";
import SmartDevice from "@/views/home/modules/smartDevice.vue";
import FacilityInspection from "@/views/home/modules/FacilityInspection.vue";

export default defineComponent({
  name: "VillageIndex",
  components: {
    SmartDevice,
    InformList,
    ApproveList,
    HouseOverview,
    VacancyWarn,
    FireFilled,
    ViewMobile,
    TotalThreeSpan,
    PropertyFeeTrend,
    ParkingTrend,
    ChargPileTrend,
    WorkOrderTrend,
    FacilityInspection,
  },
  setup() {
    const activeKey = ref("1");

    const activeChange = (key) => {};

    const dataVisualization = () => {
      window.open(`${location.origin}/orgs/#/main/dataVisualization/index`);
    };

    return {
      activeKey,
      activeChange,
      dataVisualization,
    };
  },
});
</script>

<style lang="less" scoped>
.workbench {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  :deep(.ant-tabs-nav) {
    background: #ffff;
    padding: 0 10px;
    margin-bottom: 8px;
  }
  .tabPane {
    padding: 0 10px;
  }
}
:deep(.ant-card-head) {
  padding: 0 12px;
}
:deep(.ant-card-body) {
  padding: 0;
}
.col-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .contract-box {
    height: 170px;
    width: 100%;
    margin-top: 10px;
  }
  .equipment-box {
    width: 100%;
    flex: 1;
  }
}
.col-three-height {
  height: 166px;
}
.col-default-height {
  height: 410px;
}
</style>
